 import { Suspense, useEffect, useState, useRef } from "react";
 import { Canvas, useFrame } from "@react-three/fiber";
 import { useGLTF, useTexture, useAnimations } from "@react-three/drei";
 import { easing } from "maath";

function Rig() {
 return useFrame((state, delta) => {
 easing.damp3(
 state.camera.position,
 [1 + state.mouse.x / 4, 1.5 + state.mouse.y / 4, 2.5],
      0.2,
      delta
    );
  });
 }
  export default function Att() {
  return (
    <Canvas shadows camera={{ position: [1, 1.5, 2.5], fov: 50 }}>
      <ambientLight />
      <directionalLight
        position={[-5, 5, 5]}
        castShadow
        shadow-mapSize={1024}
      />
      <group position={[0, -1, 0]}>
        <Suspense fallback={null}>
          <Model />
        </Suspense>
      </group>
      <mesh
        rotation={[-0.5 * Math.PI, 0, 0]}
        position={[0, -1, 0]}
        receiveShadow
      >
        <planeGeometry args={[10, 10, 1, 1]} />
        <shadowMaterial transparent opacity={0.2} />
      </mesh>
      <Rig />
    </Canvas>
  );
 }
function Model(props) {
  const halo = useRef();
  // Fetch model and a separate texture
  const texture = useTexture("/stacy.jpg");
  const { nodes, animations } = useGLTF("/stacy.glb");
  // Extract animation actions
  const { ref, actions, names } = useAnimations(animations);
  // Hover and animation-index states
  const [hovered, setHovered] = useState(false);
  const [index, setIndex] = useState(4);
  // Change cursor on hover-state
  useEffect(
    () => void (document.body.style.cursor = hovered ? "pointer" : "auto"),
    [hovered]
  );
  // Change animation when the index changes
  useEffect(() => {
    // Reset and fade in animation after an index has been changed
    actions[names[index]].reset().fadeIn(0.5).play();
    // In the clean-up phase, fade it out
    return () => actions[names[index]].fadeOut(0.5);
  }, [index, actions, names]);
  useFrame((state, delta) => {
    // Animate the selection halo
    easing.damp3(halo.current.scale, hovered ? 1.15 : 1, 0.2, delta);
    easing.dampC(
      halo.current.material.color,
      hovered ? "hotpink" : "aquamarine",
      0.2,
      delta
    );
  });
  return (
    <group ref={ref} {...props} dispose={null}>
      <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
        <primitive object={nodes.mixamorigHips} />
        <skinnedMesh
          castShadow
          receiveShadow
          onPointerOver={() => setHovered(true)}
          onPointerOut={() => setHovered(false)}
          onClick={() => setIndex((index + 1) % names.length)}
          geometry={nodes.stacy.geometry}
          skeleton={nodes.stacy.skeleton}
          rotation={[-Math.PI / 2, 0, 0]}
          scale={100}
        >
          <meshStandardMaterial map={texture} map-flipY={false} skinning />
        </skinnedMesh>
      </group>
      <mesh ref={halo} receiveShadow position={[0, 1, -1]}>
        <circleGeometry args={[1, 64]} />
        <meshStandardMaterial />
      </mesh>
    </group>
  )
}


